<template>
  <div class="video-chat-container" v-show="show">
    <div class="video-container">
      <div class="video-box front">
        <!-- contain -->
        <video
          id="localVideo"
          :style="'object-fit:' + objectFit"
          autoplay
          muted
          playsinline
        ></video>
        <div v-if="!isPublishing" class="video-placeholder">未开启摄像头</div>
      </div>
      <div class="video-box behide">
        <video
          id="remoteVideo"
          style="object-fit: cover"
          autoplay
          playsinline
        ></video>
        <div v-if="!remoteStream" class="video-placeholder">
          等待对方加入...
        </div>
      </div>
    </div>

    <div class="control-panel">
      <div v-if="isInRoom" class="in-room-controls">
        <div
          :class="['btn', 'start', isPublishing ? 'disabled' : '']"
          @click="startChat"
          :disabled="isPublishing"
        >
          开始聊天
        </div>
        <div class="btn leave" @click="leaveMyRoom">离开房间</div>
        <!-- <div v-if="isPublishing" class="media-controls">
          <div class="item" @click="toggleVideo">
            {{ videoEnabled ? "关闭视频" : "开启视频" }}
          </div>
          <div class="item" @click="toggleAudio">
            {{ audioEnabled ? "静音" : "取消静音" }}
          </div>
        </div> -->
      </div>
    </div>
    <div class="effect-handler-box">
      <div class="mini handler-box" @click="mini">
        <img src="@/assets/images/mini.svg" alt="" />
      </div>

      <div class="item handler-box">
        <img src="@/assets/images/icon-effectFill.svg" alt="" />
      </div>

      <div class="item handler-box">
        <img src="@/assets/images/icon-smile.svg" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import useZego from "../composables/useZego";
import { showToast } from "vant";

const {
  initSDK,
  joinRoom,
  startPublishing,
  // stopPublishing,
  destroyLive,
  isInRoom,
  isPublishing,
  // localStream,
  remoteStream,
} = useZego();

const objectFit = ref("cover");

// const localUserID = ref("");
const localUserName = ref("test");
// const localRoomID = ref("");
// const videoEnabled = ref(true);
// const audioEnabled = ref(true);

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  localUserID: {
    type: String,
    default: "",
  },
  localRoomID: {
    type: String,
    default: "",
  },
});

// 初始化并加入房间
const initAndJoin = async () => {
  try {
    initSDK(props.localUserID, localUserName.value);
    await joinRoom(props.localRoomID);
    showToast("加入房间成功");
  } catch (error) {
    const err = error as Error;
    console.error("加入房间失败:", err);
    showToast("加入房间失败: " + err.message);
  }
};

watch(
  () => props.show,
  (val) => {
    if (val) {
      initAndJoin();
    }
  }
);

// 开始聊天
const startChat = async () => {
  try {
    await startPublishing();
    showToast("开始推流成功");
  } catch (error) {
    const err = error as Error;
    console.error("开始推流失败:", err);
    showToast("开始推流失败: " + err.message);
  }
};

const emit = defineEmits(["exit"]);
// 离开房间
const leaveMyRoom = async () => {
  try {
    await destroyLive();
    emit("exit");
    showToast("离开房间成功");
  } catch (error) {
    const err = error as Error;
    console.error("离开房间失败:", err);
    showToast("离开房间失败: " + err.message);
  }
};

// 切换视频状态
// const toggleVideo = () => {
//   if (localStream.value) {
//     const videoTrack = localStream.value.getVideoTracks()[0];
//     if (videoTrack) {
//       videoTrack.enabled = !videoTrack.enabled;
//       videoEnabled.value = videoTrack.enabled;
//     }
//   }
// };

// 切换音频状态
// const toggleAudio = () => {
//   if (localStream.value) {
//     const audioTrack = localStream.value.getAudioTracks()[0];
//     if (audioTrack) {
//       audioTrack.enabled = !audioTrack.enabled;
//       audioEnabled.value = audioTrack.enabled;
//     }
//   }
// };
// 缩小
const mini = () => {
  objectFit.value = objectFit.value === "cover" ? "contain" : "cover";
};
</script>

<style scoped lang="less">
.video-chat-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 20;
  background-color: #232e3c;
  top: 0;
  left: 0;
  margin: 0 auto;
}

.video-container {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.video-box {
  flex: 1;
  width: 100vw;
  height: 100vh;
  background-color: #232e3c;
}
.video-box.front {
  z-index: 1;
  #localVideo {
    width: 100vw;
    height: 100vh;
  }
}
.video-box.behide {
  width: 120px;
  height: 160px;
  border: 1px solid #666;
  border-radius: 6px;
  z-index: 2;
  position: absolute;
  top: 15px;
  right: 15px;
  #remoteVideo {
    width: 120px;
    height: 160px;
  }
}

video {
  display: block;
  position: relative;
}

.video-placeholder {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
  font-size: 14px;
  z-index: 1;
  text-align: center;
}

.control-panel {
  width: 100%;
  padding: 20px;
  position: fixed;
  bottom: 40px;
  left: 0;
  z-index: 20;
  .in-room-controls {
    display: flex;
    flex-direction: column;
    .btn {
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: #333;
      font-weight: bold;
      font-size: 14px;
    }
    .btn.disabled {
      opacity: 0.7;
    }
    .btn.start {
      margin-bottom: 15px;
      background: #00f69d;
    }
  }
}

.media-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.effect-handler-box {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  .handler-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 40px;
    cursor: pointer;
    margin: 15px 0;
    img {
      width: 24px;
      height: 24px;
      margin: 0 auto;
    }
  }
}
</style>
